<template>
  <div>
  <el-card class="box-card">
<!--    面包屑导航-->
    <div slot="header" class="clearfix">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
<!--    筛选表单-->
    <el-form ref="form" :model="form" label-width="70px" size="mini">
      <el-form-item label="模糊筛选">
        <el-input v-model="form.keywords" @keyup.enter.native="goodList"></el-input>
      </el-form-item>
      <el-form-item label="商品品牌" prop="brandId" >
        <template>
          <el-select v-model="form.brand" placeholder="请选择">
            <el-option
              v-for="item in brandList"
              :key="item.id"
              :label="item.chineseName"
              :value="item.chineseName">
            </el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item label="特殊资源" prop="resource">
        <el-radio-group v-model="form.status">
          <el-radio label="1">正常</el-radio>
          <el-radio label="2">下架</el-radio>
          <el-radio label="3">删除</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="goodList" :loading="searching">筛选</el-button>
        <el-button type="primary" @click="importSku" :loading="importing">重新导入sku</el-button>
        <el-button type="primary" @click="importSpu" :loading="importing">重新导入spu</el-button>
      </el-form-item>
    </el-form>
  </el-card>
<!--  商品展示列表-->
  <el-card class="box-card">
    <el-table
      :data="tableData"
      style="width: 100%"
      v-loading="searching"
    >
      <el-table-column
        label="图片">
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.sourceAsMap.skuList[0].images.split(',')[0]"
            fit="cover"
            lazy
          >
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="名称">
        <template slot-scope="scope">
          <span v-html="scope.row.sourceAsMap.name"></span>
        </template>
      </el-table-column>
      <el-table-column
        prop="sourceAsMap.skuList[0].price"
        sortable
        label="价格">
      </el-table-column>
      <el-table-column
        prop="sourceAsMap.skuList[0].saleNum"
        sortable
        label="销量">
      </el-table-column>
      <el-table-column
        sortable
        label="状态">
        <template slot-scope="scope">
           <el-tag v-if="scope.row.sourceAsMap.status === 1" type="success">已上架</el-tag>
           <el-tag v-else-if="scope.row.sourceAsMap.status === 2" type="danger">已下架</el-tag>
           <el-tag v-else-if="scope.row.sourceAsMap.status === 3" type="info">已删除</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="sourceAsMap.address"
        label="操作">
        <!-- 如果需要自定义表格列模板，则把需要自定义的内容放到 template 里面 -->
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑商品" placement="top-end">
          <el-button
            size="mini"
            circle
            icon="el-icon-edit"
            type="primary"
            @click="$router.push('/addGoods?id=' + scope.row.sourceAsMap.id.toString())"
          ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除商品" placement="top-end">
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="onDeleteArticle(scope.row.sourceAsMap.id)"
          ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
<!--    分页栏-->
    <el-pagination
      class="page"
      background
      layout="prev, pager, next"
      :current-page.sync = form.pageNum
      @current-change = pageChange
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getGoodsList, reImportSpu, reImportSku } from '@/api/goods'
import { getAllBrand } from '@/api/brand'
import { Message } from 'element-ui'
export default {
  name: 'GoodsList',
  components: {},
  props: {},
  data () {
    return {
      form: {
        keywords: '',
        brand: '',
        category: '',
        status: '1', // 商品状态 1-正常，2-下架，3-删除
        price: '',
        pageNum: 1
      },
      showTable: { // 表格展示元素
        image: '',
        name: '',
        price: 0,
        saleNum: 0,
        status: 0
      },
      tableData: [],
      total: 0,
      message: '',
      searching: false,
      importing: false,
      brandList: []
    }
  },
  computed: {},
  watch: {},
  created () {
    this.goodList()
    this.getBrand()
  },
  mounted () {},
  methods: {
    goodList () {
      this.searching = true
      getGoodsList(this.form).then(resp => {
        // 获取成功
        this.tableData = resp.data.rows
        // this.tableData = resp.data.rows.sourceAsMap.images.split('0')[0]
        this.total = resp.data.totalPages
        if (this.brandList === []) this.brandList = resp.data.brandList
        this.searching = false
      }).catch(() => {
        Message({
          type: 'warning',
          message: '筛选失败'
        })
      })
      this.searching = false
    },
    getBrand () {
      getAllBrand().then(resp => {
        // 获取成功
        if (resp.data.code === 20000) {
          this.brandList = resp.data.data
          Message({
            type: 'success',
            message: resp.data.message
          })
        } else {
          Message({
            type: 'warning',
            message: resp.data.message
          })
        }
      })
    },
    importSku () {
      this.importing = true
      reImportSku().then(resp => {
        // 获取成功
        if (resp.data.code === 20000) {
          console.log('导入sku成功')
          this.importing = false
        }
      }).catch(() => {
        Message({
          type: 'warning',
          message: '导入sku失败'
        })
      })
    },
    importSpu () {
      this.importing = true
      reImportSpu().then(resp => {
        // 获取成功
        if (resp.data.code === 20000) {
          console.log('导入spu成功')
          this.importing = false
        }
      }).catch(() => {
        Message({
          type: 'warning',
          message: '导入spu失败'
        })
      })
    },
    onDeleteArticle (id) {
      // 根据id删除商品

    },
    pageChange () {
      // 页码改变触发
      this.goodList()
    }
  }
}
</script>

<style scoped lang="less">
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
    margin-bottom: 10px;
  }
  .page {
    float: right;
  }
</style>
